import React from 'react';
import 'styles/components/simple-flow/flow-arrow.scss'
import { Icon, Row, Col, Popover } from 'antd'
function ErrorMessage(props) {
  let { errorList, nowErrorNode, onNextError, onCloseErrorList } = props;
  return <div className="error-message slideUp">
    {errorList.map((item, index) => {
      if (index === nowErrorNode) {
        return (
          <Row>
            <Col className="node-name" span={13}>
              <Icon style={{ color: 'red' }} type="exclamation-circle"/>
              <Popover content={item.message}>{item.message}</Popover>
            </Col>
            <Col className="node-length" span={5}>
              {nowErrorNode + 1}/{errorList.length}
            </Col>
            <Col span={2} className="text-center">
              <Icon onClick={() => onNextError(index - 1)} className="icon-info" type="up"/>

            </Col>
            <Col span={2} className="text-center">
              <Icon onClick={() => onNextError(index + 1)} className="icon-info" type="down"/>
            </Col>
            <Col span={2} className="text-center">
              <Icon onClick={() => onCloseErrorList()} className="icon-info close" type="close"/>
            </Col>
          </Row>
        )
      }
    })}
  </div>
}

export default ErrorMessage;
